if(!window.requestAnimationFrame) {
	window.requestAnimationFrame = function(callback, element) {
		var currTime = new Date().getTime();
		var timeToCall = Math.max(0, 16 - (currTime - lastTime));
		var id = window.setTimeout(function() {
				callback(currTime + timeToCall);
			},
			timeToCall);
		lastTime = currTime + timeToCall;
		return id;
	};
}
if(!window.cancelAnimationFrame) {
	window.cancelAnimationFrame = function(id) {
		clearTimeout(id);
	};
}

var startTime = "";
var endTime = "";
var Timer = "";

var active = {
	showLoading: function() {
		var loading = document.createElement('div');
		loading.classList.add("main-loading");
		document.body.appendChild(loading);
		return {
			close: function() {
				loading.parentNode.removeChild(loading);
			}
		}
	},
	getX: function(fn) {
		var loading = active.showLoading();
		mui.ajax('http://192.168.100.1:9000/vib_xvalues/?format=json', {
			dataType: 'json',
			type: 'get',
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				var dataArr = [],
					dateArr = [];
				for(var i = 0; i < data.length; i++) {
					dateArr.push(data[i]['ctime']);
					dataArr.push(data[i]['xvalue']);
				}
				var myChart1 = echarts.init(document.getElementById("x"));
				myChart1.setOption({
					tooltip: {
						trigger: 'axis',
						position: function(pt) {
							return [pt[0], '10%'];
						}
					},
					grid: {
						bottom: "20%",
						top: '20%'
					},
					title: {
						left: 'center',
						text: '采集数据X',
						textStyle: {
							fontSize: "0.24rem"
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dateArr
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%']
					},
					series: [{
						name: 'X',
						type: 'line',
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						itemStyle: {
							normal: {
								color: '#3FA7DC'
							}
						},
						data: dataArr
					}]
				});

				loading.close();
				!!fn && fn();
			}
		})
	},
	getY: function(fn) {
		var loading = active.showLoading();
		mui.ajax('http://192.168.100.1:9000/vib_yvalues/?format=json', {
			dataType: 'json',
			type: 'get',
			success: function(data) {
				var dataArr = [],
					dateArr = [];
				for(var i = 0; i < data.length; i++) {
					dateArr.push(data[i]['ctime']);
					dataArr.push(data[i]['yvalue']);
				}
				var myChart1 = echarts.init(document.getElementById("y"));
				myChart1.setOption({
					tooltip: {
						trigger: 'axis',
						position: function(pt) {
							return [pt[0], '10%'];
						}
					},
					grid: {
						bottom: "20%",
						top: '20%'
					},
					title: {
						left: 'center',
						text: '采集数据Y',
						textStyle: {
							fontSize: "0.24rem"
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dateArr
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%']
					},
					series: [{
						name: 'Y',
						type: 'line',
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						itemStyle: {
							normal: {
								color: '#3FA7DC'
							}
						},
						data: dataArr
					}]
				});

				loading.close();
				!!fn && fn();
			}
		})
	},
	getZ: function(fn) {
		var loading = active.showLoading();
		mui.ajax('http://192.168.100.1:9000/vib_zvalues/?format=json', {
			dataType: 'json',
			type: 'get',
			success: function(data) {
				var dataArr = [],
					dateArr = [];
				for(var i = 0; i < data.length; i++) {
					dateArr.push(data[i]['ctime']);
					dataArr.push(data[i]['zvalue']);
				}
				var myChart1 = echarts.init(document.getElementById("z"));
				myChart1.setOption({
					tooltip: {
						trigger: 'axis',
						position: function(pt) {
							return [pt[0], '10%'];
						}
					},
					grid: {
						bottom: "20%",
						top: '20%'
					},
					title: {
						left: 'center',
						text: '采集数据Z',
						textStyle: {
							fontSize: "0.24rem"
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: dateArr
					},
					yAxis: {
						type: 'value',
						boundaryGap: [0, '100%']
					},
					series: [{
						name: 'Z',
						type: 'line',
						smooth: true,
						symbol: 'none',
						sampling: 'average',
						itemStyle: {
							normal: {
								color: '#3FA7DC'
							}
						},
						data: dataArr
					}]
				});

				loading.close();
				!!fn && fn();
			}
		})
	},
	startF: function(fn) {
		mui.ajax('http://192.168.100.1:9000/vibration/', {
			data: {
				"command": "run"
			},
			dataType: 'json',
			type: 'post',
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				console.log(data);
				!!fn && fn();
			}
		})
	},
	endF: function(fn) {
		mui.ajax('http://192.168.100.1:9000/vibration/', {
			data: {
				"command": "stop"
			},
			dataType: 'json',
			type: 'post',
			headers: {
				'Content-Type': 'application/json'
			},
			success: function(data) {
				console.log(data);
				!!fn && fn();
			}
		})
	},
	time: function() {
		endTime = new Date();
		var left = endTime.getTime() - startTime.getTime();
		var Hourse = parseInt(left / (60 * 60 * 1000));
		var minuts = parseInt((left - Hourse * 60 * 60 * 1000) / (60 * 1000));
		var second = parseInt((left - Hourse * 60 * 60 * 1000 - minuts * 60 * 1000) / 1000);
		var miaoshu = parseInt((left - Hourse * 60 * 60 * 1000 - minuts * 60 * 1000 - second * 1000) / 100);
		if(Hourse < 10) {
			Hourse = "0" + Hourse;
		}
		if(minuts < 10) {
			minuts = "0" + minuts;
		}
		if(second < 10) {
			second = "0" + second;
		}
		var _str = Hourse + ":" + minuts + ":" + second + "." + miaoshu;
		document.getElementById("innerHTML").innerHTML = _str;
		Timer = requestAnimationFrame(active.time);
	},
	init: function() {
		mui('.model-button').on('tap', 'a[type="start"]', function() {
			var that = this;
			active.startF(function() {
				that.innerHTML = "结束";
				that.setAttribute('type', 'end');
				startTime = new Date();
				Timer = requestAnimationFrame(active.time);
			});
		});
		document.getElementById("back").addEventListener('tap', function() {
			document.getElementById("step1").style.display = "block";
			document.getElementById("step2").style.display = "none";
			document.getElementById("x").innerHTML = "";
			document.getElementById("y").innerHTML = "";
			document.getElementById("z").innerHTML = "";
			document.getElementById("innerHTML").innerHTML = "00:00:00.00";
		});
		mui('.model-button').on('tap', 'a[type="end"]', function() {
			var that = this;
			active.endF(function() {
				that.innerHTML = "开始";
				that.setAttribute('type', 'start');
				cancelAnimationFrame(Timer);
				document.getElementById("step1").style.display = "none";
				document.getElementById("step2").style.display = "block";
				active.getX();
				active.getY();
				active.getZ();
			})
		});
	}
};
active.init();